<template>
  <div class="custom-bread-crumb">
    <Breadcrumb :style="{fontSize: `${fontSize}px`}">
      <BreadcrumbItem v-for="item in list" :to="{path:`/project/${getProjectId()}/home`}"
                      :key="`bread-crumb-${item.name}`">
        <!-- <div @click="jumpToHome(item)" style="display:inline-block"> -->
        <common-icon style="margin-right: 4px;" :type="item.icon || ''"/>
        {{ showTitle(item) }}
        <!-- </div> -->
      </BreadcrumbItem>
    </Breadcrumb>
  </div>
</template>
<script>
  import { showTitle } from '_c/common/util'
  import { getProjectId } from '@/libs/util'
  import CommonIcon from '_c/common-icon'
  import './custom-bread-crumb.less'

  export default {
    name: 'customBreadCrumb',
    components: {
      CommonIcon
    },
    props: {
      list: {
        type: Array,
        default: () => []
      },
      fontSize: {
        type: Number,
        default: 14
      },
      showIcon: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      showTitle (item) {
        return showTitle(item, this)
      },
      isCustomIcon (iconName) {
        return iconName.indexOf('_') === 0
      },
      getCustomIconName (iconName) {
        return iconName.slice(1)
      },
      getProjectId
    }
  }
</script>
